<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件化</title>
</head>
<body>
<h1> 组件化结构</h1>
<div id="app">
    <h3>div id app</h3>
    <hello-com></hello-com>
    <!-- 通过key的方式定义标签 -->
    <hello-com31></hello-com31>
</div>

<div id="bpp">
    <h3>div id bpp</h3>
    <hello-com></hello-com>
    <!-- 不会显示 -->
    <hello-com31></hello-com31>
</div>

<template id="GlobalTem">
    <div>
        <span v-text="msg"></span>
    </div>
</template>

<template id="AreaTem">
    <div>
        <span v-text="msg"></span>
    </div>
</template>
<!-- 引入js文件 -->
<script src="../js/vue.js"></script>
<script>
    /* 这是全局组件 */
    Vue.component("helloCom", { //组件体
        data() {
            return {

                msg: `这是全局组件`
            }
        },
        //对应html 可以直接写html内容 不过一般是写id值 class值等对应html标签体
        template: `#GlobalTem`,
        methods: {}
    })

    //在元素外定义组件 对象的方式
    let helloCom31 = {
        data() {
            return {
                msg: `一个局部组件`
            }
        },
        template: `#AreaTem`

    }

    const APP = new Vue({
        //不要忘记# .等符号
        el: '#app',
        data: {},
        methods: {},
        /* 说明：局部组件 只能在某个Vue对象之内使用 组件标签 */
        components: {
            //<!-- 局部组件使用时 也要先声明后使用 -->
            // 第一种 组件的写法
            // helloCom2: {
            // 	data() {
            // 		return {
            // 			msg: `这是局部组件`
            // 		}
            // 	}
            // }
            //第二种 组件写法 常用 k：v结构
            // helloCom31: helloCom31,
            //如果key-value相同 则Js可以简化为key,如下：
            helloCom31

        }
    })

    const BPP = new Vue({
        //不要忘记# .等符号
        el: '#bpp',
        data: {},
        methods: {}
    })
</script>
</body>
</html>
